<template>
  <div class="content">
    <div class="header">
      <img class="a" src="../assets/left.png" alt />
      <p>乘车码</p>
      <img class="b" @click="isios==false?showTell():callIos(999999)" src="../assets/serve.png" alt />
      <van-popup
        class="popup showtell"
        v-model="isshowtell"
        round
        position="bottom"
        :style="{ height: '16%' }"
      >
        <!-- 电话 -->
        <van-button type="primary" class="photo" v-if="isios==false" @click="callPhone(12345)">
          <img src="../assets/tellicon.png" class="bgName" alt />
          <span>呼叫 （025）6738 2908</span>
        </van-button>
        <van-button type="primary" @click="isshowtell=false">取消</van-button>
      </van-popup>
    </div>
    <div class="tabs">
      <div class="tab" :class="{on:tabIndex==0}" @click="changeTab(0)">
        <img src="../assets/metro_on.png" v-if="tabIndex==0" alt />
        <img src="../assets/metro.png" v-else alt />
        地铁
      </div>
      <!-- <div class="tab" :class='{on:tabIndex==1}' @click='changeTab(1)'>
        <img src="../assets/bus_on.png" v-if='tabIndex==1' alt="">
        <img src="../assets/bus.png" v-else alt="">
        公交
      </div>-->
    </div>
    <div class="info">
      <div class="tabBottom">
        <span :class="{show:tabIndex==0}">
          <div></div>
        </span>
        <!-- <span :class='{show:tabIndex==1}'><div></div></span> -->
      </div>
      <div v-if="!isUnlock">
        <img src="../assets/logo.png" alt />
        <div class="notLogin" v-if="!isLogin">
          <div class="icons">
            <div class="icon">
              <img src="../assets/icon1.png" alt />
              无需排队
            </div>
            <div class="icon">
              <img src="../assets/icon2.png" alt />
              先乘后付
            </div>
            <div class="icon">
              <img src="../assets/icon3.png" alt />
              无需带卡
            </div>
          </div>
          <div class="logined">
            <div class="checkbox">
              <van-checkbox icon-size="16px" v-model="checked"  @click="shows = true">
                阅读并同意
                <span class="pp">
                  《开通地铁乘车码申请须知》、
                </span>
                <span class="pp">
                  《我的南京APP乘车码用户隐私授权协议》
                </span>
              </van-checkbox>
            </div>
          </div>
          <van-button block :class="{on:checked}" is-link @click="showPopup">
            <p>开通地铁乘车码</p>
          </van-button>
          <van-popup
            class="power"
            v-model="showl"
            position="bottom"
            :style="{ height: '42%' }"
            round
          >
            <p class="a">授权银联和南京地铁</p>
            <div class="power1">
              <span class="b">地铁乘车码由银联和南京地铁为您提供服务，是否同意将您的用户信息（姓名、手机号、身份证号、银行卡号）授权给银联和南京地铁？</span>
            </div>
            <div class="power2">
              <van-button @click="showl=false">暂不授权</van-button>
              <van-button @click="$router.push('/auth')">授权</van-button>
            </div>
          </van-popup>
        </div>
        <!-- <div class="logined" v-else>
          <div class='checkbox'>
            <van-checkbox v-model="checked">阅读并同意<span @click='show=true'>《乘车码申请须知》</span></van-checkbox>
          </div>
          <van-button block :class='{on:checked}' @click='isUnlock=true'>立即登陆</van-button>
        </div>-->
      </div>
      <div class="qrcode" v-else>
        <img :src="qrcode" alt />
        <div class="_info">
          <van-icon name="replay" />请点击乘车码刷新
        </div>
      </div>
    </div>
    <!-- <div class="ticket">
      <div class="title">乘车优惠券</div>
      <div class='item item1'>
        <span>优惠活动一</span>
        <span class='right'>去领取</span>
      </div>
      <div class="item item2">
        <span>优惠活动二</span>
        <span class='right'>去领取</span>
      </div>
    </div>-->
    <div class="twobtn">
      <van-button disabled @click="$router.push('/log')">
        <p>乘车记录</p>
      </van-button>
      <b></b>
      <van-button disabled @click="$router.push('/busCode')">
        <p>更多服务</p>
      </van-button>
    </div>
    <div class="foot">
      <p>我的南京 • 银联 • 南京地铁</p>
    </div>
    <van-popup v-model="shows" :lock-scroll="false">
      <van-tabs v-model="activeName" color=" #0064f4" @click="show=flase">
        <van-tab title="乘车码申请须知" name="a" >
           <div class="wrapper">
        <div class="block">
          <!-- <van-icon name="clear" class="close" @click="show=false" /> -->
          <div class="title"><b>开通地铁乘车码申请须知</b></div>
          <div class="detail">
            <div><b>南京地铁我的南京乘车码申请须知/服务协议</b></div>
            <div style="text-indent:2em">
              <p>
                <b>
                请您仔细阅读本须知，特别是以加粗字体显示的内容。如果您不接受本须知条款/服务协议，您应立即停止使用乘车码服务，如您点击同意本须知或继续使用乘车码服务，即视为您已理解并接受本须知所有条款。
               </b> 
              </p>
              <p>
                本协议是南京地铁运营有限责任公司（以下简称“南京地铁”）、中国银联股份有限公司（以下简称“中国银联”）、南京大数据集团有限公司（以下简称“南京大数据集团”）与您在我的南京APP客户端内开通、使用、管理乘车码服务的相关事项所订立的有效合约。
              </p>
              <p><b>特别提醒：</b>如您为无民事行为能力人或为限制民事行为能力人，请告知您的监护人，并在您监护人的指导下阅读本协议和使用本服务。</p> 
               <p>
                 <b>一、服务内容</b>
                 <br>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. 我的南京App乘车码（以下简称“乘车码”）服务是南京地铁、中国银联、南京大数据集团三方联合为您提供的一种便利乘车服务。其中，南京地铁授权中国银联将乘车码提供给我的南京App使用，南京地铁和中国银联为乘车码服务支持方（以下简称“服务支持方”），我的南京为乘车码服务提供方（以下简称“服务提供方”）。您可在我的南京App开通乘车码业务，并在已安装乘车码使用设备的南京地铁闸机上，享有使用我的南京App乘车码付款乘车的服务体验。</p>
               <p>  
                  2.为了方便您的使用，服务提供方将不断丰富乘车码的配套增值服务，在我的南京APP提供查询开通线路、乘车记录等服务，具体以实际上线的为准。
               </p>
              <p>
                <b>二、服务提供方的权利和义务</b>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.请您理解并同意，除法律法规明确规定要求服务提供方承担责任之外，您使用乘车码服务所获得任何商品、服务或内容所可能引发的任何风险和后果由您本人自行承担，服务提供方对此不承担责任。
              </p>
              <p>
                2.您在南京地铁闸机上使用乘车码服务，即表示您同意遵守《南京地铁扫码过闸使用须知》、《南京地铁乘客事务处理规则》等相关规定，受其约束，并承担所产生的法律后果。如您违反，服务提供方有权禁止您再次使用本服务。
              </p>
              <p>
                3.除法律规定或者服务提供方公示的承诺外，服务提供方将不对所提供的服务适用性或满足您特定需求及目的进行任何其他附加说明。请您在使用服务前确认自身的需求。服务提供方不承担因您误解服务信息导致的任何责任。
              </p>
              <p>
                4.服务提供方可以根据自身业务的发展，对本服务进行迭代升级，增加、减少或撤销服务功能，优化本服务内容，终止本服务，或修订本协议。本服务前述调整及本协议修订，服务提供方将通过公告或采用其他可行的方式通知您，具体生效日期以公告载明日期为准。
              </p>
              <p>
                5.服务提供方将努力维护乘车码系统的安全、有效、正常运行，保障您能够流畅使用本服务；但因通讯、停电故障、黑客攻击、不可抗力等不可预见情形引起的服务中断或受阻，服务提供方将免于承担责任。
              </p>
              <p>
                6.为丰富乘车码的增值服务功能，以便您在我的南京APP享有查询乘车行程、乘车费用等多种服务体验，您授权并同意服务提供方、服务支持方可以收集您的乘车行程、费用信息，以便在我的南京APP为您提供查询服务。在法律法规允许的范围内，服务提供方将基于为更好地向您提供服务之目的，在合理范围内保存并使用您在使用本产品过程中产生的上述信息。您了解该信息仅能作为您使用本服务的参考数据，服务提供方将保障提供数据的真实性和准确性，但无法确保网络异常等极端情况下出现的差错。
              </p>
              <p>
                7.鉴于本服务下的实际扣款时间或存在一定延迟，您须保证您所选定银行卡在使用本服务过程中始终拥有足够的余额或信用额度用于费用扣缴，若您的银行卡余额或额度不足，或处于被发卡银行止付、挂失补办新卡未激活或过期未续卡等异常状态，或将导致支付失败，届时，请您及时通过其他方式完成支付。
              </p>
              <p>
                8.请您理解并同意，您如未遵循“一进一出”规则导致进/出站记录缺失，您须在3日内至任意车站客服中心处理，否则服务提供方将按进/出站的线网最高单程票价收取票款。
              </p>
              <p>
                9.请您理解并同意，您一年内不完整进/出站记录达到7次的，服务提供方将有权限制此账号在地铁中使用。
              </p>
              <p>
                10.您同意服务提供方有权对您已享受乘车码服务但未支付的款项进行追偿，包括服务提供方可以针对未付清款项主动向您绑定银行卡账户发送相应的扣款指令。针对未付清款项的用户，服务提供方有权拒绝、限制此类用户享受本服务。
              </p>
              <p>
                11.您同意服务提供方有权基于业务调整或风险监控的需要，暂停或终止向您提供本服务的全部或部分功能，同时，若服务提供方认为您有可疑交易或有违反法律法规或本须知的规定之情形时，有权先行暂停或终止向您提供部分或全部服务功能。
              </p>
              <p>
                12.您对于银行卡的使用同时应受发卡银行银行卡章程、领用须知等文件约束，您与发卡银行之间的权利义务及纠纷及争议等，由您与发卡银行另行解决。
              </p>
              <p>
                13.南京大数据集团非常重视对您的信息保护，遵循合法、正当、必要的原则，依照法律法规与《我的南京APP乘车码用户隐私协议》的规定，严格保护您的信息。请您仔细阅读该政策，如有任何疑问，请随时联系我们（我的南京官方客服025-67382908）。
              </p>
              <p>
                14.您在本服务过程中有任何疑问，请致电我的南京官方客服025-67382908或南京地铁服务热线025-51899999。
              </p>
              <p>
                <b>四、违约责任 </b>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;任何一方违反本协议约定，应当承担违约责任，并赔偿因此给另一方造成的直接损失。
              </p>
              <p></p>
              <p>
                <b>五、法律适用及争议解决 </b>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本协议适用中华人民共和国法律。本协议任何争议均应通过友好协商解决。如协商不成，均可向被告所在地人民法院提起诉讼。
              </p>
            </div>
          </div>
          <van-button v-if="show" block type="info" @click="activeName='b'">请继续阅读下一协议</van-button>
          <van-button v-else block type="info" @click="shows=false;checked=true;">我已阅读并同意</van-button>
        </div>
      </div>
        </van-tab>
        <van-tab title="用户隐私授权协议" name="b">
           <div class="wrapper">
        <div class="block">
          <!-- <van-icon name="clear" class="close" @click="show=false" /> -->
          <div class="title"><b>我的南京APP乘车码用户隐私授权协议</b></div>
          <div class="detail">
            <div style="text-indent:2em">
              <p>
                为了给广大市民提供更优质的公共交通服务，我的南京APP推出地铁、公交乘车码功能，为用户提供手机二维码刷闸乘车功能。
                我们非常重视您的个人信息保护。我们致力于维持您对我们的信任，恪守适用法律和我们对您的承诺，尽全力保证您的个人信息安全和合理使用。同时，我们郑重承诺，我们将按业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。
              </p>
              <p>
                本授权协议将帮助您了解以下内容：
              </p>
              <p>
                1.我们如何收集和使用您的信息
              </p>
              <p>
                2.我们如何保存您的信息
              </p>
              <p>
                我的南京APP仅会出于本授权协议所述的以下目的，收集和使用您的个人信息：
              </p>
              <p>
                一、我们如何收集和使用您的信息
              </p>
              <p>
                在您使用我的南京APP及乘车码等相关服务时，您理解并同意，我们会收集关于您使用“我的南京-乘车码”过程中的信息，用以向您提供服务、提升我们的服务质量，此类信息包括：
              </p>
              <p>
                1.个人基本信息
              </p>
              <p>
                当您授权本协议，我们会获取您的个人中心里面的基本信息，包括但不限于姓名、手机号码、身份证号码等，我们获取这些基本信息用于与中国银联、南京地铁运营有限责任公司共同开通电子地铁卡，同时将用于南京绿钻信息科技有限公司为南京银行开启“钱包”功能。这些信息在您申请开通乘车码功能时，将传输给中国银联、南京地铁运营有限责任公司，用于地铁电子卡的注册申请之用。
              </p>
              <p>
                2.设备信息
              </p>
              <p>
                当您授权本协议，我们会获取您的手机设备的信息，包括但不限于MAC地址、经纬度类型、IMEI、IDFV、IDFA等，我们获取这些基本信息用于乘车码的基本功能。
              </p>
              <p>
                3.影像资料
              </p>
              <p>
                当您授权本协议，我们会获取您的影像资料，包括但不限于身份证正面照片、身份证反面照片、每一张活体检测照片，我们获取这些基本信息用于南京绿钻信息科技有限公司为南京银行开启“钱包”功能。这些信息在您开通乘车码功能时，用以乘车码的行程支付。
              </p>
              <p>
                4.支付信息
              </p>
              <p>
                当您授权本协议后，您在使用二维码支付或控件支付时，我们会获取您的银行卡账号、鉴别信息（电子口令）、手机号码、设备标识及IP地址以完成交易，与发卡银行就您的银行卡号、交易金额、商户名称、交易时间、交易类型进行相应的交互和处理，以实现交易处理的目的。
              </p>
              <p>
                二、我们如何保存您的信息
              </p>
              <p>
                1.保存期限
              </p>
              <p>
                当您授权本协议后，我们将持续为您保存您的以上信息，直到“我的南京-乘车码”模块下架或注销。如果您注销帐户或主动删除上述信息，我们将依据网络安全法等法律法规规定保存您的信息。在您注销帐户或主动删除上述信息后，我们不会再对您的个人信息进行商业化使用，但我们可能会对您的个人信息进行匿名化处理后使用。
              </p>
              <p>
                2.保存地域
              </p>
              <p>
                您的个人信息均储存于中华人民共和国境内。我们会严格按照法律法规的规定执行，并保证您的个人信息安全。
              </p>
              <p>
                3.安全措施
              </p>
              <p>
                （1）我们会以业界成熟的安全标准和规范收集、使用、存储和传输用户信息，并通过授权协议告知您相关信息的使用目的和范围。
              </p>
              <p>
                （2）我们非常重视信息安全。我们委派了专责团队负责研发和应用多种安全技术和程序等，我们会对安全管理负责人和关键安全岗位的人员进行安全背景审查，我们建立了完善的信息安全管理制度和内部安全事件处置机制等。我们会采取符合业界标准的合理可行的安全措施和技术手段存储和保护您的个人信息，以防止您的信息丢失、遭到被未经授权的访问、公开披露、使用、修改、毁损、丢失或泄漏。我们会采取一切合理可行的措施，保护您的个人信息。我们会使用加密技术确保数据的保密性；我们会使用受信赖的保护机制防止数据遭到恶意攻击。
              </p>
              <p>
                （3）我们会对员工进行数据安全的意识培养和安全能力的培训和考核，加强员工对于保护个人信息重要性的认识。我们部署访问控制机制，对处理个人信息的员工进行身份认证及权限控制，并会与接触您个人信息的员工、合作伙伴签署保密协议，明确岗位职责及行为准则，确保只有授权人员才可访问个人信息。若有违反保密协议的行为，会被追究相关责任。
              </p>
              <p>
                （4）在个人信息安全事件发生时，我们会立即启动应急预案，采取相应的补救措施，在最短时间内追溯原因并减少损失。与此同时，我们将按照法律法规的要求，及时向您告知安全事件的基本情况和可能的影响、我们已采取或将要采取的处理措施、您可自主防范和降低的风险的建议、对您的补救措施等。我们将及时将事件相关情况以邮件、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。同时，我们还将按照监管部门要求，上报个人信息安全事件的处置情况。
              </p>
              <p>
                本人已经完全知悉并充分理解本授权协议条款的内容及相应的法律后果，已经充分理解并知晓该等信息被提供和使用的风险，愿意接受本授权协议条款的约定，并同意本授权协议以数字电文形式订立。本人一旦在线点击确认，本授权协议即生效。
              </p>
            </div>
          </div>
          <van-button block type="info" @click="shows=false;checked=true;">我已阅读并同意</van-button>
        </div>
      </div>
        </van-tab>
      </van-tabs>
     
    </van-popup>
  </div>
</template>

<script>
import { getUserStatus } from "../api";
export default {
  data() {
    return {
      show: true,
      isios: false,
      checked: false,
      tabIndex: 0,
      isLogin: false,
      isUnlock: false,
      isKnow: false,
      qrcode: false,
      showl: false,
      isshowtell: false,
      shows: false,
      activeName: 'a',
    };
  },
  created() {
    // 判断当前设备为安卓还是ios
    const u = navigator.userAgent;
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isiOS) {
      console.log("ios");
      this.isios = true;
      return "ios";
    } else {
      console.log("andriod");
      this.isios = false;
      return "andriod";
    }
  },
  methods: {
    // 调用拨号功能
    callPhone(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
    },
    callIos(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
    },
    changeTab(index) {
      this.tabIndex = index;
    },
    showPopup() {
      if(this.checked == true){
        this.showl = true;
      }
    },
    // showText() {
    //     this.show = true;
    // },
    //  showText2() {
    //     this.show = true;
    // },
    showTell() {
      this.isshowtell = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  box-sizing: border-box;
  font-family: PingFangSC-Medium, PingFang SC;
  min-height: 100vh;
  background: linear-gradient(137deg, #318bff 0%, #1876ff 100%);
  padding: 21px 17px 10px 17px;
  .header {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    .showtell {
      font-size: 16px;
      background-color: transparent;
      padding: 16px;
      font-weight: 500;
      button {
        display: block;
        border-radius: 10px;
        background-color: #fff;
        width: 92%;
        color: #207cff;
        padding: 0 25px;
        img {
          width: 17px;
          height: 21px;
          margin-right: 13px;
        }
      }
      .photo {
        margin-bottom: 16px;
        .van-button__content {
          justify-content: flex-start;
          .van-button__text {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    .a {
      width: 22px;
      height: 22px;
    }
    .b {
      width: 22px;
      height: 19px;
    }
    p {
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 250;
      color: #ffffff;
      line-height: 25px;
      margin: 0;
    }
  }
  .tabs {
    display: flex;
    justify-content: center;
    overflow: hidden;
    .tab {
      width: 92px;
      height: 34px;
      line-height: 34px;
      border-radius: 17px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-repeat: no-repeat;
      font-size: 18px;
      font-weight: 500;
      color: #fff;
      margin: 0 10px;
      margin-top: 18px;
      &.on {
        background-color: #fff;
        color: #0064f4;
      }
      img {
        margin-right: 8px;
        width: 18px;
        height: 18px;
      }
    }
  }
  .info {
    margin-top: 23px;
    border-radius: 10px;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    padding: 33px 19px;
    position: relative;
    .tabBottom {
      margin: 0 -19px;
      width: 100%;
      height: 16px;
      position: absolute;
      top: 0px;
      color: #fff;
      font-size: 60px;
      display: flex;
      justify-content: center;
      span {
        display: block;
        text-align: center;
        width: 92px;
        margin: 0 10px;
        display: flex;
        justify-items: center;
        align-items: center;
        opacity: 0;
        div {
          width: 0;
          height: 0;
          border: 13px solid #fff;
          transform: translateX(32px) rotate(45deg);
        }
        &.show {
          opacity: 1;
        }
      }
    }
    .notLogin {
      .icons {
        display: flex;
        justify-content: space-evenly;
        margin: 15px 0;
        color: #333;
        font-size: 12px;
        font-weight: 400;
        .icon {
          display: flex;
          flex-flow: column;
          img {
            width: 46px;
            height: 46px;
            margin-bottom: 5px;
          }
        }
      }
      .color {
        background: linear-gradient(137deg, #318bff 0%, #1876ff 100%);
      }
      .power {
        p {
          width:350px;
          height: 22.5px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 250;
          color: #333333;
          line-height: 22.5px;
          margin: 20px 114px 0 114.5px;
        }
        .power1 {
          width: 351px;
          height: 119px;
          background: #f5f5f5;
          border-radius: 4px;
          margin: 23.5px 12px 0 12px;
          span {
            display: block;
            width: 317px;
            height: 87px;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #333333;
            line-height: 29px;
            padding: 14px 18px 17px 17px;
          }
        }
        .power2 {
          display: flex;
          button {
            width: 169.5px;
            height: 45px;
            background: #ffffff;
            border-radius: 4px;
            border: 2px solid #e5e5e5;
            margin: 15px 10px;
          }
        }
      }
      button {
        // border:1px solid #0064F4;
        // color: #0064F4;
        // font-size: 16px;
        // font-weight: 500;
        // 416px 89px
        width: 208px;
        height: 44.5px;
        background: #ffffff;
        border-radius: 10px;
        border: 2px solid #0064f4;
        margin: 0 auto;
        p {
          height: 22.5px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 250;
          color: #0064f4;
          line-height: 22.5px;
        }
      }
    }
    .logined {
      .checkbox {
        justify-content: center;
        display: flex;
        margin: 10px 0;
        & >>> .van-checkbox__label {
          font-size: 12px;
          font-weight: 500;
          .pp {
            color: #ff4141;
          }
        }
      }
      button {
        margin-top: 10px;
        color: #0064f4;
        border-radius: 5px;
        opacity: 0.4;
        font-weight: 500;
        font-size: 16px;
        border: 1px solid #0064f4;
        &.on {
          opacity: 1;
        }
      }
    }

    .qrcode {
      display: flex;
      flex-flow: column;
      align-items: center;
      ._info {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        margin-top: 16px;
        i {
          margin-right: 5px;
        }
      }
    }
  }
  .ticket {
    padding: 15px 17px;
    background-color: #fff;
    border-radius: 10px;
    margin: 15px 0;
    .title {
      color: #999;
      font-size: 16px;
      font-weight: 500;
    }
    .item {
      background-repeat: no-repeat;
      background-size: 100% auto;
      height: 58px;
      line-height: 58px;
      margin: 5px 0;
      padding: 0 17px;
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &.item1 {
        background-image: url("../assets/item1.png");
      }
      &.item2 {
        background-image: url("../assets/item2.png");
      }
      .right {
        height: 25px;
        line-height: 25px;
        border-radius: 13px;
        border: 1px solid #fff;
        padding: 0 13px;
      }
    }
  }
  .twobtn {
    display: flex;
    margin-top: 15px;
    border-radius: 10px;
    width: 343px;
    height: 45px;
    background: #ffffff;
    b {
      margin-top: 12.5px;
      width: 1px;
      height: 20px;
      background: #959595;
      border-radius: 10px;
    }
    button {
      width: 171.5px;
      border: none;
      border-radius: 10px;
      p {
        height: 22.5px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 250;
        color: #666666;
        line-height: 22.5px;
      }
    }
  }
  // &>button{

  // border-radius: 5px;
  // background-color: transparent;
  // border: 1px solid #FFF;
  // font-size: 16px;
  // font-weight: 500;
  // color: #FFF;
  // }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .foot {
    width: 100%;
    display: flex;
    justify-content: center;
    p {
      height: 12px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 250;
      color: #ffffff;
      line-height: 12px;
      margin-top: 37px;
      margin-bottom: 14.5px;
    }
  }
  .block {
    width: calc(100vw - 32px);
    border-radius: 10px;
    height: calc(100vh - 60px);
    background-color: #fff;
    padding: 0 17px;
    box-sizing: border-box;
    position: relative;
    .close {
      position: absolute;
      font-size: 24px;
      color: #999;
      top: 10px;
      right: 10px;
    }
    .title {
      font-weight: 500;
      color: #333;
      font-size: 16px;
      margin-top: 36px;
      text-align: center;
    }
    .detail {
      height: calc(100% - 130px);
      margin-top: 10px;
      overflow: auto;
      & > div {
        text-indent: 2em;
        font-size: 12px;
        font-weight: 400;
        line-height: 23px;
        color: #333;
        &.b {
          text-indent: 0;
          font-weight: 500;
        }
      }
    }
    button {
      margin: 10px 0;
    }
  }
}
</style>